import {
    Cartesian3,
    SceneTransforms,
    Color,
    HeightReference,
    Cartesian2,
    VerticalOrigin,
    LabelStyle
} from 'cesium'
import * as SuperGif from 'libgif'
import gif from '@/assets/img/map_marker/lv.gif'
let cViewer:any=null;
export default  class MarkerGif{
    entity:any;
    interval:any;
    constructor(viewer:any) {
        this.entity=null;
        this.interval=null;
        cViewer=viewer;
    }

    init(position:any) {
        const gifDiv = document.createElement('div');
        const gifImg = document.createElement('img');
        // gif库需要img标签配置下面两个属性
        gifImg.setAttribute('rel:animated_src',gif)
        gifImg.setAttribute('rel:auto_play', '0')
        gifDiv.appendChild(gifImg);
        let _this=this;
        // 新建gif实例
        var rub = new SuperGif({ gif: gifImg } );

        rub.load(function () {
            let imglist:any = [];

            // 获取 gif 图的每一帧图片
            for (var i=1; i <= rub.get_length(); i++) {
                // 遍历gif实例的每一帧
                rub.move_to(i);
                imglist.push(rub.get_canvas().toDataURL())
            }

            let flag = 0;
            let len = imglist.length;
            // 创建图片实体
            _this.entity = cViewer.entities.add({
                position: Cartesian3.fromDegrees(position[0], position[1],100),
                billboard: {
                    image: imglist[0], // default: undefined
                    show: true, // default
                    scale: 3 // default: 1.0
                }
            });

            // 循环更新 billboard
            _this.interval=setInterval(() => {
                flag++;
                if (flag >= len) {
                    flag = 0;
                }
                _this.entity.billboard.image = imglist[flag];
            }, 30);
        });
    }

    remove(){
        if(this.interval){
            clearInterval(this.interval);
        }
        if(this.entity){
            cViewer.entities.remove(this.entity); //删除e
        }
    }
}
